<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>主页</title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
		<link rel="stylesheet" href="static/layui/css/layui.css">
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
		<!-- css -->
		<style>
			.img_9_blocks {
				padding: 10px;
				height: 500px;
			}
			.img_checkbox {
				width: 20px;
				height: 20px;
			}
			#checkboxall {
				width: 20px;
				height: 20px;
				margin-top:6px;
				float: left;
			}

			body {
			font-family: "Lato", sans-serif;
		}
		
		.sidenav {
			height: 100%;
			width: 0;
			position: fixed;
			z-index: 1;
			top: 0;
			left: 0;
			background-color: #111;
			overflow-x: hidden;
			transition: 0.5s;
			padding-top: 60px;
		}
		
		.sidenav a {
			padding: 8px 8px 8px 32px;
			text-decoration: none;
			font-size: 25px;
			color: #818181;
			display: block;
			transition: 0.3s;
		}
		
		.sidenav a:hover, .offcanvas a:focus{
			color: #f1f1f1;
		}
		
		.sidenav .closebtn {
			position: absolute;
			top: 0;
			right: 25px;
			font-size: 36px;
			margin-left: 50px;
		}
		
		@media screen and (max-height: 450px) {
		  .sidenav {padding-top: 15px;}
		  .sidenav a {font-size: 18px;}
		}
		</style>
	
		<script type="text/javascript ">
		function openNav() {//打开侧边栏函数
					  document.getElementById("mySidenav").style.width = "250px";
				  }
				  
		function closeNav() {//关闭侧边栏函数
			  document.getElementById("mySidenav").style.width = "0";
			}

			// 提交标注结果
			function doLabeling() {
				// 询问用户是否提交标注
				if(confirm("提交标注？"))
				{
					// 先获取所有的图片复选框
					var boxes = document.getElementsByName('imageLabel')
					// 创建2个数组--分别存放有被用户选中的图片路径与没被用户选中的图片路径
					var checks = new Array()
					var unchecks = new Array()
					var j=0;
					var k=0;
					// 循环判断每一个复选框是否被选中
					for(var i=0;i< boxes.length ; i++)
					{
						// 如果某个复选框被勾选了，就将其对应的图片路径存入checks数组中
						if(boxes[i].checked)
						{
							// 如果被选中了
							checks[j] = boxes[i].value;
							j++;
						}
						// 如果某个复选框未被勾选，就将其对应的图片路径存入unchecks数组中
						else
						{
							unchecks[k] = boxes[i].value;
							k++;
						}
					}
					//利用ajax调用后台python函数，移动图片（打标记）
					$.ajax({
						type: "POST",
						url: "/label.do",
						traditional:true,  //加上此项可以传数组--一定要加
						data: {
							'qipao' : checks,
							'other' : unchecks,
							// 如果是发送POST请求，就必须在ajax中标识这个
							'csrfmiddlewaretoken' : $('[name="csrfmiddlewaretoken"]').val()
						},
						success:function (result)
						{
							alert(result);
							//更换下一组图片
							changeImages();	
						},
						error: function () {
							alert('AJAX请求label.do发生了错误！请检查！');
						}
					});	
				}		
			}
			// 更换一组图片（刷新页面--目前暂时只想到这个方法）
			function changeImages() {
				location.reload();
			}

			// 当全选复选框被点击的时候
			function dealCheckAll() {
				// 获取全选框
				var checkAll = document.getElementById('checkboxall');
				// 获取所有的图片复选框
				var boxes = document.getElementsByName('imageLabel');
				// 判断当前全选框是否被勾选
				if(checkAll.checked)
				{
					// 如果是，就勾选所有的图片复选框
					for(var i=0; i<boxes.length; i++)
						boxes[i].checked = true;
				}
				else
				{
					// 否则，去取消所有图片复选框的勾选
					for(var i=0; i<boxes.length; i++)
						boxes[i].checked = false;
				}	
			}

			// 当某个图片复选框被点击的时候
			function checkOne(obj) {
				// 获取全选框
				var checkAll = document.getElementById('checkboxall');
				// 如果这个复选框被选中了
				if(obj.checked) {
					// 检查所有的图片复选框是否被选中
					var boxes = document.getElementsByName('imageLabel');
					var flag = true;
					for(var i=0; i<boxes.length; i++)
						if(!boxes[i].checked)
						{
							flag = false;
							break;
						}
					// 如果全都选中了，全选的复选框也要被勾选上
					if(flag)
						checkAll.checked = true;
				}
				// 如果这个复选框取消选中 -- 全选复选框也要跟着取消选中
				else checkAll.checked = false;
			}
		</script>
	</head>

	<body style="background-image: url(static/common/image/bg2.jpg);background-size: 100%">
		<!--导航栏-->
		<nav class="navbar navbar-expand-sm  navbar-dark " style="height:10%;background-color: #2C3D59"> 
			<span class="text-white ml-4" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; 菜单栏</span>               
				<h2 class=" font-weight-bold ml-5" style="color:#FFFFFF;padding-left:360px">旗袍识别系统</h2>
				<div style="padding-left: 30%">
						<div class="dropdown"><!--下拉菜单-->
						  	<a class="text-white dropdown-toggle" data-toggle="dropdown">
							  <img  style="height: 24px;width: 24px;-webkit-border-radius:12px;-moz-border-radius:12px;background-color:#FFFFFF" src="static/common/image/user.png">&nbsp;
							  	{% if username == none %}
							  		未登录
						  		{% else %}
							  		<span>{{username}}</span>
								{% endif %}
							</a>
						  <div class="dropdown-menu small">
							<a class="dropdown-item" href="/logout.do">
								<img style="height: 20px;width: 20px;border-left:1px #00FF66" src="static/common/image/poweroff.png">退出
							</a>
						  </div>
						</div>   
				</div>               
		</nav>

		<!-- 页面内容 -->
		<div class="container-fluid">
			<div class="row">
				<!--侧边栏-->
				<div id="mySidenav" class="sidenav">
						<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
						<a class="nav-link ml-5 mt-4" href="/crawlerPage">爬虫</a>
						<a class="nav-link ml-5 mt-4" href="/labelPage">标注</a>
						<a class="nav-link ml-5 mt-4" href="/classifyPage">分类</a>
						<a class="nav-link ml-5 mt-4" href="/algorithmPage">算法</a>
					  </div>
					 <!-- <span class="mt-5 ml-5" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; 菜单栏</span> -->

				<div class="col-sm-10">
					<div style="height: 90%;width: 80%;margin :10px 0px 0px 200px;">
							<button class="layui-btn " style="float: right;margin:0px 50px 5px 0px;" onclick="doLabeling()">提交标注</button>
							<button class="layui-btn " style="float: right;margin:0px 20px 5px 0px;" onclick="changeImages()">换一组</button>
						<!-- 如果想法POST请求必须标识这个 -->
						{% csrf_token %}
						<!-- 这里是主模板 -->
						<!-- 如果未标注的图片数量大于0 -->
						{% if unlabel_img_count > 0 %}
							<h2 class="ml-5">请勾选是<b><span style="color: red">旗袍</span></b>的图片</h2>
							<!--图片九宫格-->
							<div class="img_9_blocks">
								{% for img_path in img_path_List %}
									<div class="layui-col-md4">
										<input type="checkbox" name="imageLabel" class="img_checkbox ml-5" value={{img_path}} onclick="checkOne(this)">
										<img class="mt-3 ml-2" src= {{img_path}} width="160", height="160" />
									</div>
								{% endfor %}
							</div>
							<!-- 全选框 -->
							<div class="mt-5">
							<input class="ml-5" type="checkbox" name="checkboxbutton" id="checkboxall" onclick="dealCheckAll()">
							<span style="font-size: 20px;">全选</span>
							<br><br>
							</div>
						{% else %}
							<!-- 如果未标注的图片数量小于0（没有图片需要标注） -->
							<h2>没有图片需要标注</h2>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	</body>
</html>